<template>
	<view>
		<view class="top">
			<view class="table">
				<view>
					<text class="one">费用类型</text>&nbsp;

					<text>{{list[0].Business_types}}</text>

				</view>

				<view>
					<text class="one">就诊科室</text>&nbsp;
					<text>{{list[0].Clinic_department}}</text>
				</view>


				<view>
					<text class="one">就诊人</text>&nbsp;
					<text>{{list[0].patients_name}}</text>
				</view>

				<view>
					<text class="one">就诊卡号</text>&nbsp;
					<text>{{list[0].card_numer}}</text>
				</view>

			</view>



		</view>
		<view class="top">
			<view class="money">
				<td class="one">费用明细</td>

				<td>
					<view class="zhong ">
						<view id="zuo">
							<p class="myp2">新型冠状病毒核酸检测（咽拭子）</p>
							<p class="myp">单价：￥150.00 数量：1 </p>
						</view>
						<view class="you">￥150.00</view>
					</view>
				</td>

			</view>

		</view>
		<view class="top">
			<view class="table">
				<view>
					<text class="one">支付方式</text>&nbsp;
					<text>{{list[0].Method_payment}}</text>
				</view>

				<view>
					<text class="one">卡内余额</text>&nbsp;
					<text>{{list[0].patients_balance_of}}元
						<text class="two">去充值 ></text></text>

				</view>

			</view>

		</view>
		<view class="btom">
			<p id="onep">预约须知：</p>
			<p>1.核酸检测结果有效期：7天。</p>

			<p>2.受检者必须全程佩戴口罩，采样时将口罩封装在塑料袋里放入口袋中，采样后立即佩戴好口罩。</p>

			<p>3、新冠病毒核酸检测（咽拭子）采样前2小时不进食、不吸烟、不饮酒，采样前清水漱口。</p>

			<p>4、预约成功后如须退款，请于我院退费窗口办理。</p>

		</view>
		<view class="foot">
			<button>合计：<text>150.00</text></button>
			<button @click="tiaozhuan">确认支付</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				binData: {},
				list:[]
			}
		},
		methods: {

			getall() {
				uni.request({
					url: "http://localhost:3000/selecttable",
					success: (res) => {
						console.log(res);
						this.binData = res.data.data
					}
				})
				// uni.getStorage({
				// 	key: 'binData',
				// 	success: function(res) {
				// 		console.log(res);
				// 		this.binData = json.prse(res[0].data.data.data)
				// 	}
				// });


			},
			tiaozhuan() {
				uni.navigateTo({
					url: "/pages/home/hesuandetect/appointment/appointment"
				})
			}
		},
		onLoad() {
			this.getall()
		this.list = uni.getStorageSync('binData1');
		console.log(this.list)
		}
	}
</script>

<style lang="scss">
	.top {
		.table {
			width: 700rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;
			border: 1px solid #f2f2f2;
			padding-left: 10rpx;
			// padding: 20rpx 10rpx;
			box-sizing: border-box;

			view {
				border-bottom: 1px solid #f2f2f2;
				padding: 30rpx;
			}

		}

		.money {
			width: 700rpx;
			padding: 40rpx 0;
			margin-left: 20rpx;
			margin-top: 20rpx;
			border: 1px solid #f2f2f2;
			padding-left: 10rpx;
			// padding: 20rpx 10rpx;
			box-sizing: border-box;

			.zhong {
				display: flex;
				border-top: 1px solid #f2f2f2;

			}
		}

		.one {
			color: #b9b9b9;
		}

		.myp {
			padding-top: 10rpx;
			font-size: 24rpx;
			color: #c9c9c9;
		}

		.myp2 {
			font-size: 30rpx;
		}

		.you {
			padding-top: 17rpx;
			box-sizing: border-box;
		}
	}

	.two {
		color: #4998ff;
		padding-left: 100rpx;
	}

	.btom {
		width: 700rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		border: 1px solid #f2f2f2;
		padding-left: 10rpx;
		color: #9d9d9d;
		box-sizing: border-box;

	}

	#onep {
		color: black;
	}

	.foot {
		position: fixed;
		// display: flex;
		bottom: 0;
		margin: 0 13rpx;

		button {
			float: left;
			width: 360rpx;
			border-radius: 0;
		}
	}

	.foot button:nth-child(2) {
		background-color: #006eff;
		color: white;
	}
</style>
